<template>
    <div class="author-ctrl-page">
        <Card :dis-hover="true">
            <p slot="title">
                <Icon type="person-stalker"></Icon> 所有作者
            </p>
            <div slot="extra">
                <Input v-model="searchKey" class="search-input" icon="search" placeholder="姓名或拼音" style="width: 300px" @keydown.native.enter="doSearch"></Input>
                <Button type="ghost" class="add-new-btn" v-if="searchKey" @click="clearSearch()">清空</Button>

                <Button type="ghost" class="add-new-btn" icon="plus" @click="showModal()">新增</Button>
            </div>
            <can-edit-table ref="roleTable" v-model="authorList" :columns-list="tableHeader" @on-change="handleChangeAuthor" :highlight-row="true"
                     @on-delete="deleteAuthor" :loading="pageLoading" @on-action-click="clickAction"></can-edit-table>
            <!-- <transition name="fade">
                <div class="loading-cover" v-if="pageLoading">
                    <Spin fix size="large"></Spin>
                </div>
            </transition> -->
            <div class="page-ctrl"  v-if="pageCount">
                <Page :total="pageCount" :current="pageNum" show-total show-elevator @on-change="changePage" :page-size="20"></Page>
            </div>
        </Card>
         <Modal :mask-closable="false" v-model="showAddModal" title="新增作者" @on-ok="ok" @on-cancel="cancel" :loading="modalLoading" class="add-author-modal">
            <Form ref="authorForm" :model="authorForm" :rules="authorFormRule" :label-width="80">
                <Row>
                    <Col span="6">
                         <header-img-uploader :img-upload-path="imgUploadPath" :upload-img-data="uploadImgdata" @on-upload-success="uploadSuccess" :show-img-path="anthorHeaderPath"></header-img-uploader>
                    </Col>
                    <Col span="18">
                        <FormItem prop="name" label="姓名">
                            <Input v-model="authorForm.name" placeholder="输入作者"></Input>
                        </FormItem>
                        <FormItem prop="name_code" label="拼音">
                            <Input v-model="authorForm.name_code" placeholder="输入作者姓名拼音"></Input>
                        </FormItem>
                    </Col>
                </Row>
                <FormItem label="简介" prop="intro" style="padding:20px 0;">
                    <Input v-model="authorForm.intro" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入简介，最多100字" :maxlength="100"></Input>
                </FormItem>
            </Form>
         </Modal>
    </div>
</template>
<script src="./author-ctrl.js">
</script>
<style lang="scss" src="./author-ctrl.scss">

</style>
